<template>
  <div>
    123动画
    <!-- 简单元素 -->
    <button @click="ok = !ok"></button>
    <transition>
      <div v-if="ok">toggled content</div>
    </transition>

    <!-- 动态组件 -->
    <span @click="view = 'view1'">view</span>
    <span @click="view = 'open'">open</span>
    <transition name="fade" mode="out-in" appear>
      <component :is="view"></component>
    </transition>

    <!-- 事件钩子 -->
    <div id="transition-demo">
      <transition @after-enter="transitionComplete">
        <div v-show="ok">toggled content</div>
      </transition>
    </div>
    <span @click="add">新增</span>
    <transition-group tag="ul" name="slide">
      <li v-for="item in items" :key="item.id">
        {{ item.text }}
      </li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ok: false,
      view: "view1",
      items: [
        { text: 1, id: 1 },
        { text: 1, id: 2 },
        { text: 1, id: 3 },
      ],
    };
  },
  components: {
    view1: {
      template: `<div>123</div>`,
    },
    open: {
      template: `<div>wqe</div>`,
    },
  },
  methods: {
    transitionComplete: function(el) {
      // 传入 'el' 这个 DOM 元素作为参数。
    },
    add() {
      let obj = {
        id: this.items.length + 1,
        text: 12,
      };
      this.items.push(obj);
    },
  },
};
</script>

<style></style>
